<template>
	<view class="add-card-container">
		<view class="form-container">
			<!-- 卡号输入 -->
			<view class="form-item">
				<text class="label">卡号</text>
				<input v-model="formData.bank_card" type="number" class="input" placeholder="请输入卡号" maxlength="19" @input="formatCardNumber" />
			</view>
			<!-- 银行账户名称 -->
			<view class="form-item">
				<text class="label">账户名称</text>
				<input v-model="formData.name" type="text" class="input" placeholder="请输入账户名称" />
			</view>
			<!-- 手机号输入 -->
			<view class="form-item">
				<text class="label">手机号</text>
				<input v-model="formData.mobile" type="number" class="input" placeholder="请输入银行预留手机号" maxlength="11" />
			</view>
			<!-- 银行名称（u-input禁用 + u-action-sheet选择） -->
			<view class="form-item">
				<text class="label">银行名称</text>
				<!-- 禁用的u-input，仅用于展示选择结果 -->
				<view @click.stop="openBankSheet" :class="{ input: true, placeholderCss: !formData.bank_name }">
					{{ formData.bank_name ? formData.bank_name : '请选择银行' }}
				</view>
				<!-- 选择图标 -->
				<view class="select-icon" @click.stop="openBankSheet">
					<u-icon name="arrow-right" color="#999" size="24rpx"></u-icon>
				</view>
			</view>
			<!-- 卡类型选择 -->
			<view class="form-item card-type">
				<text class="label">卡类型</text>
				<view class="radio-group">
					<view
						v-for="item in cardTypes"
						:key="item.value"
						class="radio-item"
						:class="{ active: formData.card_type === item.value }"
						@click="formData.card_type = item.value"
					>
						<view class="radio-icon">
							<view class="radio-inner" :class="{ active: formData.card_type === item.value }">
								<text v-if="formData.card_type === item.value" class="checkmark">✓</text>
							</view>
						</view>
						<text class="radio-label">{{ item.label }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 提交按钮 -->
		<button class="submit-btn" @click="handleSubmit">提交</button>

		<!-- 银行选择弹窗：u-action-sheet -->
		<u-action-sheet
			:actions="bankList"
			:show="showBankSheet"
			@close="showBankSheet = false"
			@select="handleBankSelect"
			title="选择银行"
			cancel-text="取消"
			cancel-color="#999"
			item-style="font-size: 28rpx; padding: 24rpx 0;"
			title-style="font-size: 28rpx; padding: 24rpx 0; border-bottom: 1rpx solid #f0f0f0;"
		></u-action-sheet>
	</view>
</template>

<script>
import { bankCard } from '@/api';
export default {
	data() {
		return {
			id: null,
			formData: {
				bank_card: '', //银行卡号
				mobile: '', //银行绑定手机号
				card_type: 1, // 卡类型: 1=储蓄卡, 2=信用卡
				name: '', // 银行账户名称
				bank_name: '' // 银行名称
			},
			cardTypes: [
				{ label: '储蓄卡', value: 1 },
				{ label: '信用卡', value: 2 }
			],
			// 银行列表数据（label和value均为字符串，适配u-action-sheet）
			bankList: [
				{ name: '工商银行', value: '工商银行' },
				{ name: '农业银行', value: '农业银行' },
				{ name: '中国银行', value: '中国银行' },
				{ name: '建设银行', value: '建设银行' },
				{ name: '交通银行', value: '交通银行' },
				{ name: '招商银行', value: '招商银行' },
				{ name: '浦发银行', value: '浦发银行' },
				{ name: '民生银行', value: '民生银行' },
				{ name: '兴业银行', value: '兴业银行' },
				{ name: '平安银行', value: '平安银行' },
				{ name: '中信银行', value: '中信银行' },
				{ name: '光大银行', value: '光大银行' },
				{ name: '华夏银行', value: '华夏银行' },
				{ name: '广发银行', value: '广发银行' }
			],
			showBankSheet: false // 控制银行选择弹窗显示/隐藏
		};
	},
	onLoad(options) {
		if (options.id) {
			this.id = options.id;
			uni.setNavigationBarTitle({
				title: '编辑银行卡'
			});
			this.getBankCardInfo(this.id);
		} else {
			uni.setNavigationBarTitle({
				title: '添加银行卡'
			});
		}
	},
	methods: {
		async getBankCardInfo(id) {
			const res = await bankCard.bankDetail({ id });
			this.formData = res.data;
			this.formatCardNumber();
		},
		// 格式化银行卡号，每4位加空格
		formatCardNumber() {
			let value = this.formData.bank_card.replace(/\s/g, '');
			let formattedValue = '';

			for (let i = 0; i < value.length; i++) {
				if (i > 0 && i % 4 === 0) {
					formattedValue += ' ';
				}
				formattedValue += value[i];
			}

			this.formData.bank_card = formattedValue;
		},
		// 打开银行选择弹窗
		openBankSheet() {
			this.showBankSheet = true;
		},
		// 选择银行后赋值
		handleBankSelect(item) {
			this.formData.bank_name = item.value; // 将选择的银行value赋值给formData
			this.showBankSheet = false; // 关闭弹窗
		},
		// 验证表单
		validateForm() {
			if (!this.formData.bank_card) {
				uni.showToast({ title: '请输入卡号', icon: 'none' });
				return false;
			}
			if (!this.formData.name) {
				uni.showToast({ title: '请输入账户名称', icon: 'none' });
				return false;
			}
			if (!/^1[3-9]\d{9}$/.test(this.formData.mobile)) {
				uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
				return false;
			}
			if (!this.formData.bank_name) {
				uni.showToast({ title: '请选择银行名称', icon: 'none' });
				return false;
			}
			return true;
		},
		// 提交表单
		async handleSubmit() {
			if (!this.validateForm()) return;

			console.log('提交表单数据:', this.formData);

			const res = await bankCard.bankSave({ ...this.formData, bank_card: this.formData.bank_card.replace(/\s/g, '') });
			console.log(res);
			if (res.code === 1 || res.code === 200) {
				uni.showToast({ title: res.msg, icon: 'success' });
				setTimeout(() => {
					uni.navigateBack();
				}, 1200);
			} else {
				uni.showToast({ title: res.msg, icon: 'error' });
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.add-card-container {
	padding: 40rpx 30rpx;
	background-color: #f5f5f5;
}

.form-container {
	background: #fff;
	border-radius: 16rpx;
	padding: 0 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.form-item {
	padding: 30rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
	display: flex;
	align-items: center;
	/* 银行选择项添加点击光标 */
	cursor: pointer;

	.label {
		text-align: right;
		min-width: 120rpx;
		padding-right: 34rpx;
		font-size: 28rpx;
		color: #2c2e2e;
	}

	.input {
		flex: 1;
		height: 40rpx;
		line-height: 40rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
	}

	// 选择图标容器
	.select-icon {
		margin-left: 16rpx;
		color: #999;
	}

	// 移除input的上下箭头
	input[type='number'] {
		-moz-appearance: textfield;
	}
	input[type='number']::-webkit-outer-spin-button,
	input[type='number']::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
}

// 适配u-input禁用状态的穿透样式（避免uView默认样式冲突）
::v-deep .u-input--disabled .u-input__inner {
	background: transparent !important;
	border: none !important;
	color: #333 !important;
}

::v-deep .u-input__placeholder {
	color: #999 !important;
	font-size: 28rpx !important;
}

.card-type {
	.radio-group {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.radio-item {
		display: flex;
		align-items: center;
		margin-right: 60rpx;

		.radio-icon {
			margin-right: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.radio-inner {
				width: 20rpx;
				height: 20rpx;
				border: 1rpx solid #ccc;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				&.active {
					border-color: #ff4400;
					background-color: #ff4400;
				}

				.checkmark {
					color: #fff;
					font-size: 14rpx;
					line-height: 1;
					margin-top: -2rpx;
				}
			}
		}

		.radio-label {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}

		&.active {
			.radio-icon {
				color: #007aff;
			}
		}
	}
}

.submit-btn {
	margin: 60rpx 0 40rpx;
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background: #ff4400;
	color: #fff;
	border-radius: 44rpx;
	font-size: 32rpx;
	border: none;

	&:active {
		opacity: 0.8;
	}

	&[disabled] {
		background: #ccc;
	}
}
::v-deep .u-action-sheet {
	/* 最大高度：内容未超出时按实际高度显示，超出时限制为 550rpx */
	max-height: 650rpx;
	/* 核心：溢出时显示垂直滚动条，水平溢出隐藏（避免横向滚动条） */
	overflow-y: auto;
	overflow-x: hidden;
	/* 可选优化：滚动条样式美化（适配 Web 端，小程序端通常不支持自定义） */
	&::-webkit-scrollbar {
		/* 滚动条宽度（垂直滚动条） */
		width: 4rpx;
	}
	&::-webkit-scrollbar-thumb {
		/* 滚动条滑块样式（圆角+浅灰色，避免过突兀） */
		border-radius: 2rpx;
		background-color: rgba(0, 0, 0, 0.1);
	}
	&::-webkit-scrollbar-track {
		/* 滚动条轨道样式（透明，减少视觉干扰） */
		background-color: transparent;
	}
}
.placeholderCss{
	  color: #999; /* 占位符灰色 */
	  opacity: 0.6;
	  padding: 0 20rpx;
}
</style>
